<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
<script src="js/bootstrap.min.js" charset="UTF-8"></script>
<script src="js/swiper.min.js" charset="UTF-8"></script>
<script src="js/global.js" charset="UTF-8"></script>
<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
<title>U袋网</title>
</head>
<body>
	<!-- 引入个人中心头部 -->
	<jsp:include page="user-header.jsp"></jsp:include>

	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<!-- 引入左侧导航栏 -->
			<jsp:include page="pull-left-bgf.jsp"></jsp:include>
			<c:if test="${ empty USER_SESSION}">
				<h3>您还没有登录呦~</h3>
			</c:if>
			<c:if test="${ not empty USER_SESSION}">
				<div class="pull-right">
					<div class="user-center__info bgf">

						<div class="pull-left clearfix">
							<div class="port b-r50 pull-left">
								<img src="images/icons/default_avt.png" alt="用户名"
									class="cover b-r50"> <a href="udai_setting.jsp"
									class="edit"> <i class="iconfont icon-edit"></i></a>
							</div>
							<p class="name text-nowrap">您好，${USER_SESSION.userPhone }！</p>
							<p class="money text-nowrap">性别：${USER_SESSION.userSex }</p>
							<p class="money text-nowrap">生日：${USER_SESSION.userBirthday }</p>
						</div>


					</div>
					<div class="order-list__div bgf">
						<div class="user-title">我的订单</div>
						<div class="order-panel">
							<ul class="nav user-nav__title" role="tablist">
								<li role="presentation" class="nav-item active"><a
									href="#all" aria-controls="all" role="tab" data-toggle="tab">所有订单</a></li>
								<li role="presentation" class="nav-item "><a href="#pay"
									aria-controls="pay" role="tab" data-toggle="tab">待付款 </a></li>
								<li role="presentation" class="nav-item "><a href="#emit"
									aria-controls="emit" role="tab" data-toggle="tab">待发货 </a></li>
								<li role="presentation" class="nav-item "><a href="#take"
									aria-controls="take" role="tab" data-toggle="tab">待收货 </a></li>
								<li role="presentation" class="nav-item "><a href="#eval"
									aria-controls="eval" role="tab" data-toggle="tab">待评价</a></li>
							</ul>

							<div class="tab-content">
								<!-- 全部订单 -->
								<div role="tabpanel" class="tab-pane fade in active" id="all">
									<table class="table text-center">
										<tr>
											<th width="380">商品信息</th>
											<!-- <th width="85">单价</th>
											<th width="85">数量</th> -->
											<th width="120">实付款</th>
											<th width="120">交易状态</th>
											<th width="120">交易操作</th>
										</tr>
										<c:forEach items="${addList }" var="addList">
											<tr class="order-item" style="height:180px">
												<td>
												  <label>
														<div class="num">
															<!-- <input type="checkbox"> -->
															下单时间: ${addList.ordTime } 订单号: ${addList.ordId }
														</div>
														<div class="card">
															<c:forEach items="${addList.orderdetails }"
																var="orderdetails">
																<div class="img">
																	<img src="../admin/showPic/${orderdetails.proUrl }" alt="" class="cover">
																        单价：${orderdetails.proPrice }
																	 数量：${orderdetails.proNum }
																</div>
															</c:forEach>
															<%-- <div class="name ep2">${addList.ordRemark }</div> --%>
															<%-- <div class="format">品牌：${addList.brand } 材质：${addList.material }</div> --%>
														</div>
												   </label>
												</td>
												<td>$ ${addList.ordPrice }<br> 
												  <span class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span>
												</td>
												<td class="state">
												    <a class="but c6">${addList.ordState }</a>
													<a href="getOrderDetails?ordId=${addList.ordId }" class="but c9">订单详情</a>
												</td>
												<td class="order">
												   <a href="" onclick="delOrderFun(this)" data-id="${addList.ordId }" class="but c3">删除订单</a> 
												</td>
											</tr>
										</c:forEach>
									</table>
								</div>
								<!-- 监听前台删除订单单击事件 -->
								<script type="text/javascript">
									function delOrderFun(obj) {
										//var id = $(obj).data("id");
										var id = $(obj).data("id");
										//请求服务器
										$.post("updUserIdDelete", {
											"ordId" : id
										}, function(res) {
											alert("删除成功");
											window.location.reload();
										}, "json")
									}
								</script>
								<!-- 待付款 -->
								<div role="tabpanel" class="tab-pane fade" id="pay">
									<table class="table text-center">
										<tr>
											<th width="380">商品信息</th>
											<th width="120">实付款</th>
											<th width="120">交易状态</th>
											<th width="120">交易操作</th>
										</tr>
										<c:forEach items="${ordState }" var="ordState">
											<tr class="order-item" style="height:180px">
												<td><label>
														<div class="num">
															<!-- <input type="checkbox"> -->
															下单时间: ${ordState.ordTime } 订单号: ${ordState.ordId }
														</div>
														<div class="card">
															<c:forEach items="${ordState.orderdetails }"
																var="details">
																<div class="img">
																	<img src="../admin/showPic/${details.proUrl }" alt=""
																		class="cover">
																		 单价：${details.proPrice }
																	        数量：${details.proNum }
																</div>
															</c:forEach>
															<%-- <div class="name ep2">${ordState.ordRemark }</div> --%>
														</div>
												</label></td>
												<td>$ ${ordState.ordPrice }<br> <span
													class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
												<td class="state"><a class="but c6">${ordState.ordState }</a>
													<a href="getOrderDetails?ordId=${ordState.ordId }"
													class="but c9">订单详情</a></td>
												<td class="order"><a href="udai_shopcart_pay.jsp"
													class="but but-primary">立即付款</a> <a href=""
													onclick="delOrderFun(this)" data-id="${ordState.ordId }"
													class="but c3">删除订单</a> <!-- <a href="" class="but but-link">评价</a> -->
													<!-- <a href="udai_order_receipted.html" class="but but-primary">确认收货</a> -->
												</td>
											</tr>
										</c:forEach>
										<tr class="order-empty">
											<td colspan='6'>
												<div class="empty-msg">
													最近订单有点少，家里好像缺了点什么！<br> <a href="getPro">要不瞧瞧去？</a>
												</div>
											</td>
										</tr>
									</table>
								</div>
								<!-- 代发货 -->
								<div role="tabpanel" class="tab-pane fade" id="emit">
									<table class="table text-center">
										<tr>
											<th width="380">商品信息</th>
											<th width="120">实付款</th>
											<th width="120">交易状态</th>
											<th width="120">交易操作</th>
										</tr>
										<c:forEach items="${faState }" var="faState">
											<tr class="order-item" style="height:180px">
												<td><label>
														<div class="num">
															<!-- <input type="checkbox"> -->
															下单时间: ${faState.ordTime } 订单号: ${faState.ordId }
														</div>
														<div class="card">
															<c:forEach items="${faState.orderdetails }"
																var="orderdet">
																<div class="img">
																	<img src="../admin/showPic/${orderdet.proUrl }" alt=""
																		class="cover">
																		 单价：${orderdet.proPrice }
																	        数量：${orderdet.proNum }
																</div>
															</c:forEach>
															<%-- <div class="name ep2">${faState.ordRemark }</div> --%>
														</div>
												</label></td>
												
												<td>$ ${faState.ordPrice }<br> <span
													class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span>
												</td>
												<td class="state"><a class="but c6">${faState.ordState }</a>
													<a href="getOrderDetails?ordId=${faState.ordId }"
													class="but c9">订单详情</a></td>
												<td class="order"><a href="udai_apply_return.jsp"
													class="but c3">退款/退货</a></td>
											</tr>
										</c:forEach>
										<tr class="order-empty">
											<td colspan='6'>
												<div class="empty-msg">
													最近订单有点少，家里好像缺了点什么！<br> <a href="getPro">要不瞧瞧去？</a>
												</div>
											</td>
										</tr>
									</table>
								</div>
								<!-- 待收货 -->
								<div role="tabpanel" class="tab-pane fade" id="take">
									<table class="table text-center">
										<tr>
											<th width="380">商品信息</th>
											<th width="120">实付款</th>
											<th width="120">交易状态</th>
											<th width="120">交易操作</th>
										</tr>
										<c:forEach items="${shouState }" var="shouState">
											<tr class="order-item" style="height:180px">
												<td><label>
														<div class="num">
															<!-- <input type="checkbox"> -->
															下单时间: ${shouState.ordTime } 订单号: ${shouState.ordId }
														</div>
														<div class="card">
															<c:forEach items="${shouState.orderdetails }"
																var="detail">
																<div class="img">
																	<img src="../admin/showPic/${detail.proUrl }" alt=""
																		class="cover">
																		 单价：${detail.proPrice }
																	        数量：${detail.proNum }
																</div>
															</c:forEach>
															<%-- <div class="name ep2">${shouState.ordRemark }</div> --%>
														</div>
												</label></td>
												<td>$ ${shouState.ordPrice }<br> <span
													class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span>
												</td>
												<td class="state"><a class="but c6">${shouState.ordState }</a>
													<a href="getOrderDetails?ordId=${shouState.ordId }"
													class="but c9">订单详情</a></td>
												<td class="order"><a href="" class="but but-primary"
													onclick="updOrderShou(this)" data-id="${shouState.ordId }">确认收货</a>
													<a href="udai_apply_return.jsp" class="but c3">退款/退货</a></td>
											</tr>
										</c:forEach>
										<tr class="order-empty">
											<td colspan='6'>
												<div class="empty-msg">
													最近订单有点少，家里好像缺了点什么！<br> <a href="getPro">要不瞧瞧去？</a>
												</div>
											</td>
										</tr>
									</table>
								</div>
								<script type="text/javascript">
									function updOrderShou(obj) {
										//var id = $(obj).data("id"); udai_order_receipted.jsp
										var id = $(obj).data("id");
										//请求服务器
										$.post("updShouHUo", {
											"ordId" : id
										}, function(res) {
											alert("确认收货");
											window.location.reload();
										}, "json")
									}
								</script>
								<!-- 待评价 -->
								<div role="tabpanel" class="tab-pane fade" id="eval">
									<table class="table text-center">
										<tr>
											<th width="450">商品信息</th>
											<th width="120">实付款</th>
											<th width="120">交易状态</th>
											<th width="120">交易操作</th>
										</tr>
										<c:forEach items="${deliveryStatus }" var="deliveryStatus">
											<tr class="order-item" style="height:180px">
												<td><label>
														<div class="num">
															<!-- <input type="checkbox"> -->
															下单时间: ${deliveryStatus.ordTime } 订单号:
															${deliveryStatus.ordId }
														</div>
														<div class="card">
															<c:forEach items="${deliveryStatus.orderdetails }"
																var="orderdetail">
																<div class="img">
																	<img src="../admin/showPic/${orderdetail.proUrl }"
																		alt="" class="cover">
																		 单价：${orderdetail.proPrice }
																	        数量：${orderdetail.proNum }
																</div>
															</c:forEach>
															<%-- <div class="name ep2">${deliveryStatus.ordRemark }</div> --%>
														</div>
												</label></td>
												<td>$ ${deliveryStatus.ordPrice }<br> <span
													class="fz12 c6 text-nowrap">(含运费: ¥0.00)</span></td>
												<td class="state"><a class="but c6">交易成功</a> <a
													href="getOrderDetails?ordId=${deliveryStatus.ordId }"
													class="but c9">订单详情</a></td>
												<td class="order"><a href="getOrderDetailsEvaluation?ordId=${deliveryStatus.ordId }" class="but but-link">去评价</a>
													<a href="" onclick="delOrderFun(this)"
													data-id="${deliveryStatus.ordId }" class="but c3">删除订单</a>
												</td>
											</tr>
										</c:forEach>
										<tr class="order-empty">
											<td colspan='6'>
												<div class="empty-msg">
													最近订单有点少，家里好像缺了点什么！<br> <a href="getPro">要不瞧瞧去？</a>
												</div>
											</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>
			</c:if>

		</section>
	</div>
	<!-- 右侧菜单 -->
	<!-- 引入右侧菜单 -->
	<jsp:include page="right-nav.jsp"></jsp:include>
	<!-- 底部信息 -->
	<!-- 引入脚部 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>